<template>
  <rx-layout>
    <div slot="left" showButton="true" >
      <rx-fit>
        <a-directory-tree @rightClick="rightClick" @select="handleSelect" defaultExpandAll>
          <a-tree-node v-for="routeType in routeTypeList" :key="routeType.id" :title="routeType.routeTypeName"/>
        </a-directory-tree>
        <v-contextmenu ref="contextmenu">
          <v-contextmenu-item @click="addRouteType">{{i18n('list.addRouteType','新增类型')}}</v-contextmenu-item>
          <v-contextmenu-item @click="editRouteType">{{i18n('list.editRouteType','编辑类型')}}</v-contextmenu-item>
          <v-contextmenu-item @click="delRouteType">{{i18n('list.delRouteType','删除类型')}}</v-contextmenu-item>
        </v-contextmenu>
      </rx-fit>
    </div>
    <div slot="center" style>
      <rx-fit :isheader="isheader">
        <div slot="toolheader" foldheader="true" foldbtn="false" border="false">
          <div class="table-operator">
              <a-button  type="primary" icon="plus" @click="add">{{$ti18('rxList.newBtn','新建')}}</a-button>
          </div>
           <span class="search-btn-box" v-if="!isheader">
                <span class="search-btn" @click.stop="searchshow"><i class="iconfont iconguolv"></i>{{$ti18('rxList.leachBtn','过滤')}}</span>
          </span>
        </div>
        <div  btnalign="right" slot="searchbar" v-if="fitSearch" @search="search" @cancel="cancel" @close="closeSearchbar">
          <a-form :layout="colLayout">
            <a-row :gutter="24">
              <a-col :span="colSpan">
                  <a-form-item :label="i18n('form.routingName','路由名称')">
                          <a-input :placeholder="i18n('form.routingName','路由名称','input')" v-model="queryParam.Q_ROUTING_NAME__S_LK"/>
                  </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <rx-grid
                ref="table"
                :multiSelect="true"
                :columns="columns"
                :bordered="isBorder"
                :defaultPageSize="20"
                data-field="result.data"
                :queryParam="queryParam"
                url="/api-system/system/core/sysRouting/query"
                :pageSizeOptions="['10','20','40']"
                rowKey="id"
                @selectChange="onSelectChange"
        >
          <span slot="status" slot-scope="{text,record}">
            <a-tag :color="statusMap[text].color">
              <span>{{statusMap[text].text}}</span>
            </a-tag>
          </span>
          <span slot="action" slot-scope="{index,text, record}" class="actionIcons">
                  <span @click.stop="edit(record)">{{$ti18('rxList.editBtn','编辑')}}</span>
                  <span @click.stop="del([record.id])">{{$ti18('rxList.delBtn','删除')}}</span>
             </span>
        </rx-grid>
      </rx-fit>
    </div>
  </rx-layout>
</template>

<script>
  import SysRoutingApi from '@/api/system/core/sysRouting'
  import SysRouteTypeApi from '@/api/system/core/sysRouteType'
  import SysRoutingEdit from './SysRoutingEdit'
  import SysRouteTypeEdit from './SysRouteTypeEdit'
  import {BaseList,Util} from "@lowcode/jpaas-common-lib";
  export default {
    name: 'SysRoutingList',
    mixins: [BaseList],
    components: {
      SysRouteTypeEdit
    },
    data() {
      return {
        routeTypeList: [],
        routingData:[],
        columns: [
          {
            title: this.$ti18('rxList.index','序号'),
            type: 'indexColumn',
            width: 40,
            dataIndex: 'serial',
            scopedSlots: {customRender: 'serial'}
          },
          {title: this.i18n('form.routingName','路由名称'), dataIndex: 'routingName', width: 100},
          {title: this.i18n('form.condition','条件'), dataIndex: 'condition', width: 100},
          {title: this.i18n('form.filter','过滤器'), dataIndex: 'filter', width: 100},
          {title: 'uri', dataIndex: 'uri', width: 150},
          {title: this.i18n('form.status','状态'), dataIndex: 'status', width: 50,scopedSlots: {customRender: 'status'}},
            {title: this.$ti18('rxForm.createTime','创建时间'), dataIndex: 'createTime', sorter: true, sortField: 'CREATE_TIME_', width: 120},
          {title: this.$ti18('rxList.action','操作'), width: 70, dataIndex: 'action', scopedSlots: {customRender: 'action'}}
        ],
        statusMap: {
          "1": { color: 'green', text: this.i18n('form.enable','启用') },
          "0": { color: 'red', text: this.i18n('form.disable','禁用') },
        },
        curRowId:"",
        requestData: [],
        component: SysRoutingEdit,
        comment: this.i18n('list.comment','路由'),
          max:true
      }
    },
    created() {
      this.getRouteTypeList();
        this.needFilterAppId();
    },
    mounted(){
      //获取nacos的api路由
      this.getRouting();
    },
    methods: {
      i18n(name,text,key){
          return this.$ti18(name,text,"SysRouting",key);
      },
      //获取路由类型
      getRouteTypeList(){
          let self =  this ;
        SysRouteTypeApi.getRouteTypeList().then(res=>{
            self.routeTypeList=res;
        });
      },

      searchRoute(){
         this.$refs.table.loadData();
      },
      del(ids) {
        const {requestData}=this;
        var self=this;
        this.$confirm({
          title: this.$ti18('rxMsa.actionTips','操作提示'),
          content: this.$ti18('rxMsa.delInfo','您确定...？'),
            okText: this.$ti18('rxForm.ackBtn','确认'),
            cancelText: this.$ti18('rxForm.cancelBtn','取消'),
          onOk() {
            var data = [];
            for (var i = 0; i < requestData.length; i++) {
              data.push(requestData[i]);
            }
            for (var i = 0; i < data.length; i++) {
              for (var j = 0; j < ids.length; j++) {
                if(data[i].id==ids[j]){
                  data.splice(i,1);
                }
              }
            }
            SysRoutingApi.publish(data);
            SysRoutingApi.del({ids: ids.join(",")}).then(res =>{
                self.searchRoute();
            });
          }
        });
      },
      getListByParams(parameter) {
        return SysRoutingApi.query(parameter)
      },
      getRouting() {
        var self = this;
        SysRoutingApi.getRoutingApi().then(res => {
            if(res.success){
                self.requestData=res.data;
            }
        });
      },
      rightClick({event, node}) {
        this.curRowId = node.eventKey;
        const postition = {top: event.clientY, left: event.clientX};
        this.$refs.contextmenu.show(postition);
      },
      handleSelect(selectedKeys, info) {
        var selectId=selectedKeys[0];
          let params={Q_ROUTE_TYPE__S_EQ :selectId};
          if(this.curApp.appId){
              params={Q_ROUTE_TYPE__S_EQ: selectId,Q_APP_ID__S_EQ:this.curApp.appId};
          }
          this.queryParam.Q_ROUTE_TYPE__S_EQ = selectedKeys[0];
          this.$refs.table.loadData();

      },
      addRouteType(){
        this.handleRouteType();
      },
      editRouteType(){
        this.handleRouteType(this.curRowId);
      },
      handleRouteType(id) {
        var self = this;
        var config={
          curVm:this,
          component:SysRouteTypeEdit,
          title:this.i18n('routeTypeManage.title','路由类型管理'),
          widthHeight:['700px','350px'],
          data:{
            pkId:id
          }
        };
        Util.open(config,function(action){
          if (action == "ok") {
            self.getRouteTypeList();
          }
        });
      },
      delRouteType(){
        let self = this;
        this.$confirm({
          title: this.$ti18('rxMsa.actionTips','操作提示'),
          content: this.$ti18('rxMsa.delInfo','您确定...？'),
            okText: this.$ti18('rxForm.ackBtn','确认'),
            cancelText: this.$ti18('rxForm.cancelBtn','取消'),
          onOk() {
            SysRoutingApi.getRoutingByType(self.curRowId).then(res=>{
              if(res.data.length>0){
                self.$notification["error"]({
                  message: self.$ti18('rxMsa.actionTips','操作提示'),
                  description:self.i18n('msa.delRoutingTips','该类型下有数据无法删除!'),
                });
              }else {
                SysRouteTypeApi.del({ ids: self.curRowId}).then(res => {
                  if (res.success && res.code == 200) {
                    self.getRouteTypeList();
                  }
                });
              }
            });

          },
        })
      },
       search(){
        this.searchRoute();
      },
        cancel(){
            this.resetSearch();
        },
      closeSearchbar(){
        //关闭过滤弹窗；（点击X触发）
        this.fitSearch = false ;
      },
    }
  }
</script>
<style scoped>

</style>

